<template>
  <div class="mt-8 w-full flex flex-wrap justify-center lg:justify-around">
    <el-card
      v-for="doc in docs"
      :key="doc.title"
      class="card-item mb-4 mx-4 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-300 dark-hover:bg-gray-700 relative"
    >
      <div slot="header">
        <RouterLink :to="localePath(doc.uniPath, $i18n.locale)">
          <div class="flex">
            <div v-if="doc.cover" class="mr-4">
              <img :src="doc.cover" class="cover w-12 h-12 rounded-sm" />
            </div>
            <h4 class="flex-1 hover:text-primary-500 hover:font-bold">
              {{ doc.title }}
            </h4>
          </div>
        </RouterLink>
      </div>
      <!-- 关于truncate： https://tailwindcss.com/docs/word-break#class-reference -->
      <div
        v-for="item in filteredTocs(doc)"
        :key="item.id"
        class="hover:text-primary-500 truncate"
      >
        <RouterLink :to="`${doc.path.replace('/zh', '')}#${item.id}`">
          {{ item.text }}
        </RouterLink>
      </div>
    </el-card>
  </div>
</template>

<script>
import { ElCard } from 'element-ui'

export default {
  name: 'NcCompBlogList',

  props: {
    docs: {
      type: Array,
    },
  },

  methods: {
    filteredTocs(doc) {
      return doc.toc.filter((x) => x.depth === 2).slice(0, 10)
    },
  },
}
</script>

<style lang="less" scoped>
.card-item {
  width: 300px;
}

.dark-mode {
  .card-item {
    border-style: none;
  }
}

.cover {
  &:hover {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
}
</style>
